<script setup lang="ts">
import useCommonStore from '@/stores/common'
import { toRaw } from 'vue'

interface IProp {
  modelValue: boolean
  storeId: number
  selectCate: string
}
const props = defineProps<IProp>()

interface IEmits {
  (e: 'close'): void
  (e: 'select', val: any): void
}
const emits = defineEmits<IEmits>()

const close = () => {
  emits('close')
}

const commonStore = useCommonStore()
commonStore.getCateDropList({ storeId: props.storeId })

const handleSelectCate = (cate: any) => {
  emits('select', toRaw(cate))
}
</script>

<template>
  <el-dialog :model-value="modelValue" width="40%" title="选择商品类目" @close="close">
    <ul class="cate-wrapper">
      <li
        class="cate-item"
        :class="selectCate === item.categoryId ? 'selected' : ''"
        v-for="item in commonStore.cateDropList"
        :key="item.categoryId"
        @click="handleSelectCate(item)"
      >
        {{ item.pathDes }}
      </li>
    </ul>
  </el-dialog>
</template>

<style lang="scss" scoped>
.cate-wrapper {
  max-height: 500px;
  overflow: auto;
  .cate-item {
    height: 40px;
    font-size: 16px;
    line-height: 40px;
    cursor: pointer;
    padding-left: 5px;
    border: 2px;
    margin-bottom: 3px;
    &:hover {
      background-color: var(--el-color-primary-light-8);
    }
    &.selected {
      color: var(--el-color-primary);
      background-color: var(--el-color-primary-light-8);
    }
  }
}
</style>
